<%@ page language="java" import="java.util.*" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@include file="/context/mytags.jsp"%>
<!DOCTYPE html>
<html>
 <head>
  <title>学科字典</title>
  <t:base type="jquery,easyui,tools,DatePicker"></t:base>
  <script type="text/javascript">
  //编写自定义JS代码
  </script>
 </head>
 <body>
 <div style="text-align: right;text-align: right;padding: 10px;">
 	<a class='myBtn roundBorder' onclick="addMeterial()">添加耗材</a>
 </div>
  <t:formvalid formid="formobj" dialog="true" layout="table" action="consumeMeterialBuyApplyController.do?doAdd" tiptype="3" beforeSubmit="beforeSubmit"> 
		<input type="hidden" name="id" value="${apply.id }">
		<table class="commonTable" id='table'>
		<thead>
			<tr>
				<th>耗材名称</th><th>数量</th><th>金额</th><th>备注</th><th>操作</th>
			</tr>
		</thead> 
		<tbody>
	 		<c:forEach items="${items}" var="i">
	 			<tr id="tr${i.id}">
	 				<td>${i.consumeMeterial.name }</td>
	 				<td>${i.count }</td>
	 				<td>${i.amount}</td>
	 				<td>${i.remark}</td>
 	 				<td>
	 					<a href='javascript:void(0)' onclick='modLabStaff("${i.id}")'>修改</a>&nbsp;
						<a href='javascript:void(0)' onclick='deleteLabStaff("${i.id}")'>删除</a>
					</td>
	 			</tr>
	 		</c:forEach>
		</tbody>
	</table> 
  </t:formvalid>
  
  <script type="text/javascript">
  	var staffList = new Array(); //新增或者修改的员工列表
	var deleteStaffs = new Array(); //删除的员工列表
	var count = 0;
	
	//针对修改的staffList
	
	function addMeterial(id){
		
		var url = "consumeMeterialBuyApplyController.do?consumeMeterialBuyItem";
		if(id != undefined && id.length >10){
			url += "&id="+id;
		}
 		 $.dialog({
			  	id:'addMeterial',
				content: 'url:'+url,
				lock : true,
				zIndex: getzIndex(), 
				parent:frameElement.api,
				width:480,
				height:250,
				title:'添加耗材', 
				opacity : 0.3,
				cache:false,
			    ok: function(){
			    	iframe = this.iframe.contentWindow;
			    	var meterial = iframe.getMeterial();
			    	if(meterial == null) return false;
			    	handleaddMeterial(meterial);
			    },
			    cancelVal: '关闭',
			    cancel: true /*为true等价于function(){}*/
		});
	}
	
	function handleaddMeterial(meterial){
		var id = meterial.id;
		var index = isExist(id);
		if(index != -1){ //更新 替换
			staffList[index] = meterial;
			
		}else{ //新增
			if(id.length < 10){
				meterial.id=count;
			}
			staffList[count] = meterial;
	 		count++;
		}
		
		updateTableRow(meterial); 
		
	}
	
	//修改（新增)后，table中更新记录
	function updateTableRow(meterial){
		var id = meterial.id;
		
		if($('#tr'+id).length > 0){
			$('#tr'+id).html('');
		}else{
			$('#table tbody').append("<tr id='tr"+id+"'></tr>");
		}
		
		//添加一行
		$('#tr'+id).append("<td>"+meterial.meterialName+"</td>"+
		"<td>"+meterial.count+"</td>"+
		"<td>"+meterial.amount+"</td>"+
		"<td>"+meterial.remark+"</td>"+ 
		"<td><a href='javascript:void(0)' onclick='modLabStaff(\""+id+"\")'>修改</a>&nbsp;"+
		"<a href='javascript:void(0)' onclick='deleteLabStaff(\""+id+"\")'>删除</a></td>");
	} 
	
	
	function deleteLabStaff(id){
		$('#tr'+id).remove();
		for(var i =0;i<staffList.length;i++){
			if(staffList[i] != null && staffList[i].id == id){
				staffList[i] = null;
			}
		}
		
		if(id.length > 10){ //非临时id，才保存，传给服务器删除
			deleteStaffs.push(id);
		}
		
	}
	
	var currentModObj;
	function modLabStaff(id){
		if(id.length < 10){ //id长度小于10位表示是临时id
			currentModObj = getStaffFromList(id) ; 
		}else{
			currentModObj = {id:id};	
		}
		
		addMeterial(id);
	}
	
	function getStaffFromList(id){
		for(var i =0;i<staffList.length;i++){
			if(staffList[i] != null && staffList[i].id == id){
				return staffList[i];
			}
		}
		return null;
	}
	
	/**
	* 判断员工修改新增数组中是否存在此条记录
	*/
	function isExist(id){
		if(id == '') return -1;
		
		for(var i =0;i<staffList.length;i++){
			if(staffList[i] != null && staffList[i].id == id){
				return i;
			}
		}
		return -1;
	}
	
  	function beforeSubmit(){
  		
  		if(staffList.length == 0 && deleteStaffs.length==0){
  			tip("请添加耗材");
  			return false;
  		}
  		
  		//插入新增员工信息
   		for(var i =0;i<staffList.length;i++){
   				
   			if(staffList[i] == null ){
  				continue;
  			}		
  	
   			var item = staffList[i];   			
  			var id = item.id;
  			createHiddenInput("itemId",id);
  			createHiddenInput("meterialId"+id,item.meterialId);
  			createHiddenInput("count"+id,item.count);
			createHiddenInput("amount"+id,item.amount);
			createHiddenInput("remark"+id,item.remark); 
  		} 
  		 
  		 
   		 for(var i =0;i<deleteStaffs.length;i++){
  			 createHiddenInput("deleteSaffId",deleteStaffs[i]);
  		 }
  		 
  	}
 
  	 function createHiddenInput(name,value){
  		 $('#formobj').append("<input type='hidden' name='"+name+"' value='"+value+"' />");
  	 }
  </script>
  
 </body>
 